<!DOCTYPE html><div class="input-wrapper">
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#60A5FA',
                        accent: '#2563EB',
                        neutral: '#F1F5F9',
                        dark: '#1E293B'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 100vh;
            background: linear-gradient(to bottom right, #1E293B, #0F172A);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            font-family: 'Inter', sans-serif;
            color: #F1F5F9;
        }

        .auth-container {
            position: relative;
            width: 100%;
            max-width: 28rem;
            background-color: white;
            border-radius: 1.25rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            padding: 2rem;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            top: 50%;
            left: 0.75rem;
            transform: translateY(-50%);
            pointer-events: none;
            color: #64748B;
        }

        .form-input {
            color: #000;
            cursor: text;
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid #E2E8F0;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            border-color: #3B82F6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
            outline: none;
        }

        .btn-primary {
            background-color: #3B82F6;
            color: white;
            font-weight: 600;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            width: 100%;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #2563EB;
            transform: translateY(-1px);
        }

        .btn-secondary {
            color: #3B82F6;
            font-weight: 500;
            padding: 0.5rem 0;
            transition: all 0.3s ease;
            text-align: center;
            display: block;
            width: 100%;
        }

        .btn-secondary:hover {
            color: #2563EB;
        }

        .message {
            font-size: 0.875rem;
            margin-top: 0.5rem;
            text-align: center;
        }

        /* 验证码样式 */
        .captcha-wrapper {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .captcha-input {
            flex: 1;
        }

        .captcha-image {
            background: #f3f4f6;
            padding: 0.5rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 1.25rem;
            letter-spacing: 0.25rem;
            user-select: none;
            color: #000;
            min-width: 100px;
            text-align: center;
        }

        .captcha-image:hover {
            background: #e5e7eb;
        }
    </style>
</head>
<body>
    <div class="auth-container">
        <div class="w-full max-w-md">
            <h2 class="text-2xl font-bold mb-6 text-dark">登录</h2>
            <div class="space-y-4">
                <div class="input-wrapper">
                    <div class="input-icon">
                        <i class="fa-solid fa-user"></i>
                    </div>
                    <input id="loginUser" type="text" placeholder="用户名" class="form-input">
                </div>
                <div class="input-wrapper">
                    <div class="input-icon">
                        <i class="fa-solid fa-lock"></i>
                    </div>
                    <input id="loginPass" type="password" placeholder="密码" class="form-input">
                </div>
                <div class="captcha-wrapper">
                    <div class="input-wrapper captcha-input">
                        <div class="input-icon">
                            <i class="fa-solid fa-shield"></i>
                        </div>
                        <input id="captchaInput" type="text" placeholder="验证码" class="form-input" maxlength="4">
                    </div>
                    <div id="captchaImage" class="captcha-image" title="点击刷新验证码"></div>
                </div>
                <button onclick="login()" class="btn-primary">
                    登录
                </button>
                <p id="loginMsg" class="message"></p>
                <a href="register.html" class="btn-secondary">
                    没有账户？立即注册
                </a>
            </div>
        </div>
    </div>

    <script>
        let currentCaptcha = '';

        // 生成随机验证码
        function generateCaptcha() {
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += chars[Math.floor(Math.random() * chars.length)];
            }
            currentCaptcha = captcha;
            $('#captchaImage').text(captcha);
        }

        // 页面加载时生成验证码
        $(document).ready(function() {
            generateCaptcha();
        });

        // 点击验证码刷新
        $('#captchaImage').click(function() {
            generateCaptcha();
        });

        function login() {
            let user = $('#loginUser').val();
            let pass = $('#loginPass').val();
            let captcha = $('#captchaInput').val().toUpperCase();

            // 验证码检查
            if (captcha !== currentCaptcha) {
                $('#loginMsg').text('验证码错误').css('color', 'red');
                generateCaptcha(); // 刷新验证码
                $('#captchaInput').val(''); // 清空验证码输入
                return;
            }

            $.ajax({
                url: '/api/auth/login',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({username: user, password: pass}),
                success: function(res) {
                    $('#loginMsg').text('登录成功！正在跳转...').css('color', 'green');
                    setTimeout(function() {
                        window.location.href = '/main.html';
                    }, 2000);
                },
                error: function(xhr) {
                    $('#loginMsg').text(xhr.responseText).css('color', 'red');
                    generateCaptcha(); // 刷新验证码
                    $('#captchaInput').val(''); // 清空验证码输入
                }
            });
        }
    </script>
</body>
</html> 